<template>
	<!-- <view class="bg-FFFFFF"> -->
	<view class="bg-rectangle">
		<view style="width: 100%; height: 250rpx;position: absolute; ">
			<image src="../../static/images/rectangleBack.png"  mode=""></image>
		</view>
		<view style="position:absolute;top:0;width: 100%;">
		<view class="top_search mx-20 bg-FFFFFF bor-r22 h-74 aj-center posi-rela top-15" @click="searchnav()">
			<view class="search_img aj-center mr-20">
				<image src="../../static/images/outpatient/search.png" mode=""></image>
			</view>
			<view class="f-26 c-99 fw-400">
				输入关键字搜索
			</view>
		</view>

		<view class="mt-16 posi-rela top-15">
			<swiper class="swiper mx-20 " indicator-active-color="#A67016" indicator-color="#ffffff"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiper" :key="index">
					<view style="height: 350rpx;width: 100%;">
						<image :src="baseUrl+item.image" class="bor-r22" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mt-20 mx-28 just-between posi-rela top-15"  v-if="CheckStatus=='0'">
			<view class="flex bshow6 bor-r18 bg-ff p-28-48-28-28" @click="staytothe">
				<view class="card_img mr-23">
					<image src="../../static/images/outpatient/zys.png" mode=""></image>
				</view>
				<view class="flex-column ">
					<view class="f-36 f-bold  c-11 mb-8">
						找医生
					</view>
					<view class="f-24 c-77 fw-400">
						更多专家医师
					</view>
				</view>
			</view>


			<view class="flex bshow6 bor-r18 bg-ff p-28-48-28-28" @click="clearindent">
				<view class="card_img mr-23">
					<image src="../../static/images/outpatient/Group 88.png" mode=""></image>
				</view>
				<view class="flex-column ">
					<view class="f-36 f-bold  c-11 mb-8">
						医学科普
					</view>
					<view class="f-24 c-77 fw-400">
						更多科普文章
					</view>
				</view>
			</view>
		</view>
		<!-- -->
		<view class="  bshow6    bor-r18 bg-ff  just-between   mx-28 mt-20  py-20 px-24 posi-rela top-15"  v-if="CheckStatus=='0'">
			<view class="bg-DCFFE8  mr-20 bor-r18 shequ" @click="outpatient">
				<view style="    position: relative;
    right: 15rpx;">
					<view class="f-bold c-11 f-36">
						社区门诊店
					</view>
					<view class="mt-8  f-24 fw-400 c-77">
						专家问诊 线上报名
					</view>
					<view class="fs-20 mt-8  fw-400 c-00BFCF bor-r6 bor-solid1-00BFCF bg-ff  givein aj-center">
						点击进入
					</view>
				</view>
				<view class="sq_img mt-10">
					<image src="../../static/images/outpatient/sqmz.png" mode=""></image>
				</view>
			</view>

			<view class="">
				<view class="  bor-r18  flex phone_doct bg-DCFFE8">
					<!-- <view class=" " style="margin-right: 48rpx;position: relative;top:-18rpx"> -->
						<button style="padding:0;margin-left: 0;position: relative;top:-18rpx;border: none;" type="default" open-type="contact" show-message-card="true" plain="true">
						<view class="f-bold f-30 c-11 " style="text-align: left;">
							快速问诊
						</view>

						<view class="c-77 f-22 f-400">
							在线咨询 更方便
						</view>
						</button>
					<!-- </view> -->

					<view class="phone_img  ">
						<image src="../../static/images/outpatient/Group 84.png" mode=""></image>
					</view>
				</view>

				<view class="  mt-20 bor-r18 flex phone_doct bg-DCFFE8" style="z-index: 5;" @click="vip">
					<view class=" " style="margin-right: 29rpx;">
						<view class="f-bold f-30 c-11">
							会员升级区
						</view>
						<view class="c-77 f-22 f-400  mt-8">
							更多优惠 会员专享
						</view>
					</view>

					<view class=" love_img ">
						<image src="../../static/images/outpatient/Group 52.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="jfshoop_img mx-28 mt-20 posi-rela top-15" @click="mall">
			<image src="../../static/images/outpatient/jfshoop.png" mode=""></image>
		</view>


		<activity-view ref='activityView' titleName="活动专区" v-show="CheckStatus=='0'"></activity-view>
		<intro-view ref='introView' titleName="为你推荐" :CheckStatus="CheckStatus"></intro-view>

</view>


	</view>
</template>
<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif
	// import http from '@/shopro/request/doctrequest.js'
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	// import activityView from '@/goodsPage/activityView/activityView.vue';
	import activityView from './activityView/activityView.vue';
	import introView from './introView/introView.vue'
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,
			activityView,
			introView,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,
				swiper: [],
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				baseUrl: this.$baseUrl, //后台域名地址
				CheckStatus:'',//根据状态是否显示该模块
			};

		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin','initCheckStatus']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					console.log(this.homeTemplate[0]?.content?.list)
					return this.homeTemplate[0]?.content?.list;
				}
				this.CheckStatus =	this.initCheckStatus;

			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			uni.removeStorageSync('clinc_score_id');
			this.$store.commit("getCategory", '')

			// 获取banner轮播图
			this.$https('doctindex.swiper').then(res => {
				let list = res.data.content;
				this.swiper = JSON.parse(list).list;
				console.log(this.swiper, 'this.swiper')
			}).catch(e => {
				// reject(e)
			});
		
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-VUE
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif

			// 调用活动专区数据
			this.$refs.activityView.getActivityList()
			// 调用推荐数据
			this.$refs.introView.getGoodsList()

		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			// 跳转vip界面
			vip() {
				this.$store.commit("getCategory", '1')
				uni.setStorage({
					key: 'category',
					data: '1',
					success: function() {
						uni.navigateTo({
							url: 'pages/index/category'
						})
					}
				})
			},
			mall() {
				// 积分商城跳转小程序
				uni.navigateToMiniProgram({
					appId: 'wxa30859ecc33063be', //目标小程序的appid
					path: 'pages/tabBar/category/category', //目标小程序的页面路径
					extraData: {},					
					success(res) {
						// 打开成功
					}
				})
			},
			searchnav() {
				console.log('a')
				uni.navigateTo({
					url: '/goodsPage/search/search'
				})
			},
			staytothe() {
				uni.navigateTo({
					url: '/goodsPage/searchDoct/searchDoct'
				})
			},
			// 医学科普
			clearindent() {
				// clearindent
				uni.navigateTo({
					url: '/pages/hospital/info'
				})
			},
			// 社区门诊店

			outpatient() {
				uni.navigateTo({
					url: '/pages/outpatient/outpatientList'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	// @import url("@/common/css/fress.css");
	// 	@import url("@/common/css/mycss.css");
	.search_img {
		width: 30rpx;
		height: 30rpx;
	}

	.swiper {
		height: 350rpx;
	}

	.card_img {
		width: 92rpx;
		height: 92rpx;
	}

	.sq_img {
		width: 138rpx;
		height: 173rpx;
		margin-left: 10rpx;
	}

	.shequ {
		// padding: 26rpx 38rpx 0rpx 28rpx;
		padding-top: 26rpx;
		padding-right: 38rpx;
		padding-left: 46rpx;
		padding-right: 56rpx;

		.givein {
			width: 92rpx;
			height: 34rpx;
		}

	}

	.phone_doct {
		padding: 36rpx 20rpx 29rpx 20rpx;

		.phone_img {
			width: 60rpx;
			height: 93rpx;

		}

		.love_img {
			width: 60.42rpx;
			height: 80rpx;
			padding-top: 10rpx;
			// padding-left: 16rpx;

		}
	}

	.jfshoop_img {
		width: 694rpx;
		height: 125rpx;
	}

</style>
